<template>
    <div class="loan-in-detail-other" v-if='pageLoaded'>
        <!-- wrapper -->
        <div class="wrapper">
            <div class="loan-detail-header" v-if='loanUserInfo.user && type == "header"'>
                <div class="loan-detail-user" @click='goContactDetail(loanUserInfo.user.uuid)'>
                    <span class="loan-detail-user__avatar"><img :src="loanUserInfo.user.avatar || placeholderImg" alt=""></span>
                    <div class="loan-detail-user__info">
                        <p class='name'>
                            <span>{{loanUserInfo.user.realName}}</span>
                            <img v-if='loanUserInfo.isContact' width="16" height='16' src="../images/contactloan.png"></p>
                        <p>{{loanUserInfo.user.mobile}}</p>
                    </div>
                    <div class="user-operation">
                        <div class="user-operation__item" @click.stop='add' v-if='!loanUserInfo.isContact'>
                            <span class='user-operation__logo contact'></span>
                            <p class='font-caption'>加联系人</p>
                        </div>
                        <div class="user-operation__item" @click.stop='goChat(loanUserInfo.user.uuid)'>
                            <span class='user-operation__logo chat'></span>
                            <p class='font-caption'>发消息</p>
                        </div>
                        <div class="user-operation__item" @click.stop="goReportDetail">
                            <span class='user-operation__logo report'></span>
                            <p class='font-caption'>信用报告</p>
                        </div>
                    </div>
                </div>
                <div class="loan-detail-data">
                    <ul class="loan-detail-money__list">
                        <li class="loan-detail-money__item">
                            <span class='persent'>{{loanUserInfo.waitReceiveAmount | toYuan}}</span>
                            <p>待收金额</p>
                        </li>
                        <li class="loan-detail-money__item">
                            <span class='persent'>{{loanUserInfo.waitRepayAmount | toYuan}}</span>
                            <p>待还金额</p>
                        </li>
                        <li class="loan-detail-money__item">
                            <span class='persent'>{{ loanUserInfo.borrowTime }}</span>
                            <p>借到次数</p>
                        </li>
                    </ul>
                    <div class="loan-detail-button" @click='goDetail(loanUserInfo.user.uuid)'>负债详情 ></div>
                </div>
            </div>

            <div class="loan-detail-main">
                <div class="loan-detail-number">
                    <p class="loan-detail-number__number">编号: {{number}}</p>
                    <div class="loan-detail-number__status">有效期: <count-down :date='detail.borrowEffectiveTime'></count-down></div>
                </div>

                <div class="loan-detail-money">
                    <div class="loan-detail-money__total">
                        <p class='text'>借款总额</p>
                        <span class='number'>{{detail.borrowAmount | toYuan}}元</span>
                    </div>
                    <ul class="loan-detail-money__list">
                        <li class="loan-detail-money__item">
                            <span class='persent'>{{detail.yearRate/100}}%</span>
                            <p>年化利率</p>
                        </li>
                        <li class="loan-detail-money__item">
                            <span class='persent'>{{detail.serviceFee | toYuan}}</span>
                            <p>服务费(元)</p>
                        </li>
                        <li class="loan-detail-money__item">
                            <span class='persent'>{{detail.interestAmount | toYuan}}</span>
                            <p>预计利息(元)</p>
                        </li>
                    </ul>
                </div>
                <div class="loan-detail-info">
                    <ul class="card__info">
                        <li class="card__info-item">发布日期：{{ detail.createdAt | dateFormat  }}</li>
                        <li class="card__info-item">借款时长：{{detail.borrowDays}}{{detail.daysTypeStr}}</li>
                        <li class="card__info-item">还款方式：{{ detail.repayWayStr  }}</li>
                        <li class="card__info-item">借款用途：{{ detail.borrowUsage  }}</li>
                        <li class="card__info-item">服务费：{{detail.serviceFeeRate/100}}% | {{detail.serviceFee | toYuan}}元</li>
                        <li class="card__info-item">所有人可见：{{ detail.public | booleanToStr }}</li>
                    </ul>
                    <!-- <p class="card__info-item full">补充说明：{{detail.addSay || placeholder}}</p>  -->
                    <template v-if='detail.imageSay && detail.imageSay.length'>
                        <div class="card__info-item">图片说明：</div>
                        <ul class="loan-detail-info__pics">
                            <li class="loan-detail-info__pic" v-for='item in detail.imageSay' @click='imgViewShow(item.url)'>
                                <img :src="item.url">
                            </li>
                        </ul>
                    </template>
                    <div class="loan-detail-agreement">
                        <span class="button short pure" @click='showAgreement = true'>查看借款协议</span>
                        <span class="button short pure--black" 
                            @click='shorConfirmMemo'
                            v-show='detail.isApplyToMyLend && !detail.remarks'>添加备注</span>
                    </div>
                    <div class="memo" v-if='detail.remarks'>备注：{{detail.remarks}}</div>
                </div>
            </div>
            <div class="tips">
                <p class='warn'><i class='iconfont icon-warn'></i><span>重要提示</span></p>
                <p>借款有风险，出借须谨慎。</p> 
                <p>1、本平台为第三方信息展示平台，交易风险由借贷双方各自承担。</p> 
                <p>2、本平台提供的信用报告，是放款的重要依据之一，可做参考。</p>
                <p>3、除本平台提供的信用报告，出借人务必按照自己的风控规则严格审核，方可出借，以防受骗。</p>
                <p class='button pure' @click='tipsEvent'>什么是风控审核?</p>
            </div>
            
        </div>
            
        <!-- footer -->
        <transition name='fade'>
            <footer class="footer-button"
                v-if='detail.borrowState != "APPLY_REJECTED" && detail.borrowState != "BORROW_CLOSED" && detail.isApplyToMyLend && detail.borrowState != "BORROW_SUCCESS"'>
                <span class="button transparent" @click='show_modal_reject_apply = true'>拒绝申请</span>
                <!-- <span class="button purple" @click='contact("agree")'>联系TA</span> -->
            </footer>
        </transition>
        <transition name='fade'>
            <footer class="single-button"
            v-if='detail.borrowState != "APPLY_REJECTED" && detail.borrowState != "BORROW_CLOSED"  && !detail.isApplyToMyLend && detail.borrowState != "BORROW_SUCCESS"'>
                <!-- <span class="button purple" @click='contact("lend")'>联系TA</span> -->
            </footer>
        </transition>
        <transition name='fade'>
            <footer class="single-button" v-if='detail.borrowState == "APPLY_REJECTED" || detail.borrowState == "BORROW_CLOSED" || detail.borrowState == "BORROW_SUCCESS"'>
                <span class="button transparent" @click='goBack'>返回</span>
            </footer>
        </transition>

        <confirm 
            v-if='loanUserInfo.user'
            :show='show_contact_add'
            @close='show_contact_add = false'
            @confirm='applyContact'
            :tips='`需要发送申请给${loanUserInfo.user.realName}`'
            title='添加联系人申请'>
                <textarea class="confirm-textarea" placeholder="例如: 我想向你借款" rows='2' v-model='applyReason'></textarea>
        </confirm>

        <modal
            :show='showModalTips'
            @close='showModalTips = false'>
            <div class="modal-tips">
                <p>什么是风控审核？ </p>
                <p>风控审核是通过收集个人借贷相关信息，能够对贷款风险进行事前、事中和事后的全程监控，有效地评估和管控贷款业务开展过程中的信用风险、操作风险和道德风险，有完善的信贷风险的评估机制和管控机制，减轻不良贷款的压力</p> 
            </div>
        </modal>
            
        <login
            :show='showLogin'
            @close='showLogin = false'></login>

        <auth-step
            v-if='noAuth && userInfo.user'
            :show='showTips'
            title='contact'
            @toggle='showTips = !showTips'
            @close='showTips = false'></auth-step>

        <agreement
            :show='showAgreement'
            @close='showAgreement=false'></agreement>

        <confirm 
            class='confirm-reject'
            :show='show_modal_reject_apply'
            @close='show_modal_reject_apply = false'
            @confirm='rejectApply'
            title='拒绝申请'>
            <textarea class="confirm-memo__textarea" placeholder="告诉对方被拒绝的原因吧" rows='2' v-model='rejectReason'></textarea>
        </confirm>

        <actionsheet 
            class='contact-actionsheet'
            :show='show_contact_actionsheet'
            @close='show_contact_actionsheet = false'
            @confirm='rejectApply'>
            <div class="component-actionsheet__item" @click='goChat(loanUserInfo.user.uuid)'>聊一聊</div>
            <div class="component-actionsheet__item" @click='callPhone(detail.borrowUserMobile)'>直接联系:{{loanUserInfo.user.mobile}}</div>
        </actionsheet>

        <confirm 
            class='confirm-memo'
            :show='show_confirm_memo'
            confirmText='保存备注'
            @close='show_confirm_memo = false'
            @confirm='saveMemo'
            title='填写备注'>
            <div class="confirm-memo__main">
                <textarea class="confirm-memo__textarea" placeholder="请输入备注内容" rows='2' v-model='memo'></textarea>
                <div class="confirm-memo-quick">
                    <h1 class="title">快捷内容输入</h1>
                    <ul>
                        <li @click='addMemo("待对方提交资料")'>待对方提交资料</li>
                        <li @click='addMemo("有意向, 进一步联系")'>有意向, 进一步联系</li>
                    </ul>
                </div>
            </div>
        </confirm>

        <confirm 
            :show='show_confirm_lend'
            @close='show_confirm_lend = false'
            closeText=''
            confirmText=''
            title='重要提示'>
                <div class="confirm-tips">
                    <p>借款有风险，出借须谨慎。</p> 
                    <p>1、本平台为第三方信息展示平台，交易风险由借贷双方各自承担。</p> 
                    <p>2、本平台提供的信用报告，是放款的重要依据之一，可做参考。</p>
                    <p>3、除本平台提供的信用报告，出借人务必按照自己的风控规则严格审核，方可出借，以防受骗。</p>
                    <div class="button long" @click='confirmLend'>我已完成风控审核，愿意借给TA</div>
                </div>
            </confirm>

        <image-view 
            :url='currentImg' 
            :show='modal_img_show' 
            @close='modal_img_show = false'></image-view>

        <pay-detail
            :amount='detail.borrowAmount'
            :show='showPayDetail'
            @close='showPayDetail=false'
            @finish='payDetailFinish'></pay-detail>

        <pay-password
            :show='showPayPassword'
            @close='showPayPassword=false'
            @finish='payFinish'></pay-password>

        <sms-code
            v-if='userInfo.user'
            :show='showSmsCode'
            type='LEND'
            :mobile='userInfo.user.mobile'
            @close='showSmsCode=false'
            @finish='smsFinish'></sms-code>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import actionsheet from '../components/Actionsheet.vue'
    import confirm from '../components/Confirm.vue'
    import countDown from '../components/CountDown.vue'
    import payPassword from '../components/PayPassword.vue'
    import payDetail from '../components/PayDetail.vue'
    import smsCode from '../components/SmsCode.vue'
    import login from '../components/Login.vue'
    import toYuan from '../filters/filter-toYuan'
    import authStep from '../components/AuthStep.vue'
    import imageView from '../components/ImageView.vue'
    import agreement from '../components/Agreement.vue'
    import modal from '../components/Modal.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import booleanToStr from '../filters/filter-booleanToStr'
    import { convertRequestURL } from '../utils/utils'
    import  { mapGetters, mapActions }  from 'vuex'
    import { loginValidation } from '../validation/validation'
    import { allApi, loginApi, contactApi, loanInApi, loanOutApi, userApi, payApi } from '../api/api'
    import { getQueryString } from '../utils/utils'
    import moment from 'moment'

    export default {
        components:{
            actionsheet,
            modal,
            confirm,
            authStep,
            countDown,
            login,
            agreement,
            imageView,
            payPassword,
            payDetail,
            smsCode
        },
        filters:{
            toYuan,
            dateFormat,
            booleanToStr
        },
        data() {
            return {
                placeholderImg:require('../images/loading_1.png'),
                placeholder:'--',
                type:this.$route.query.type,
                pageLoaded:false,
                showTips:false,
                showLogin:false,
                showModalTips:false,
                show_contact_actionsheet:false,
                memo:'',
                rejectReason:'',
                number:this.$route.params.number,
                passwordPass:false,
                payWay:'',
                applyReason:'',
                showAgreement:false,
                showPayPassword:false,
                show_confirm_lend:false,
                show_confirm_memo:false,
                show_contact_add:false,
                showPayDetail:false,
                showSmsCode:false,
                modal_img_show:false,
                show_modal_reject_apply:false,
                smsCode:'',
                currentImg:'',
                detail:{},
                tel:'',
                password:'',
                loanUserInfo:{},
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            userInfo(){
                return this.localInfo.userInfo
            },
            noAuth(){
                return (this.userInfo.user && this.userInfo.user.validState != 'OK' ) || this.userInfo.noZmxy || this.userInfo.noOperators
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setUserInfo',
                'setSessionId',
                'setNeedLogin'
            ]),
            // function

            goDetail(id){
                this.$router.push({
                    name:'loan-detail',
                    params:{
                        id:id
                    }
                })
                this.$ga.event({
                  eventCategory: 'debt _v',
                  eventAction: 'click',
                  eventLabel: '负债详情点击次数'
                })
                allApi.onEvent({
                    eventType:'track_click',
                    eventName:'debt _v',
                    eventDescr:'负债详情点击次数',
                    eventValue:JSON.stringify({
                        uuid:id
                    }),
                })
            },
            callPhone(phone){
                location.href = `tel:${phone}`
            },
            goChat(id){
                if(!this.userInfo.isPay || this.userInfo.isExpired){
                    this.setMsgTip({
                        text:'请先完成信用报告',
                        type:'info'

                    })
                    return
                }
                if(!this.userInfo.user){
                    this.showLogin = true
                    return
                }

                this.showLoading()
                contactApi.im({
                    uuid:id
                })
                .then(result=>{
                    this.hideLoading()
                    let info = result.info
                    let myAccid = info.myAccid
                    let accid = info.accid
                    let token = info.token
                    location.href = convertRequestURL(`?token=${token}&uid=${myAccid}#/chat/p2p-${accid}`,'chat')
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            goContactDetail(id){
                this.$router.push({
                    name:'contact-detail',
                    params:{
                        id:id
                    }
                })
            },
            goLogin(){
                this.$router.push({
                    name:'bind-phone'
                })
            },
            withinOneDay(time){
                let now = moment()
                let diff = moment(time)
                let diffDays = diff.diff(now,'days')
                let diffTime = diff.diff(now)
                if(diffDays <= 0) return true
                return diffDays
                return true
            },
            goReportDetail(){
                if(!this.loanUserInfo.creditReport){
                    this.setMsgTip({
                        text:'该用户暂无信用报告！',
                        type:'warn'
                    })
                    return
                }
                this.$router.push({
                    name:'user-credit-report-detail',
                    params:{
                        no:this.loanUserInfo.creditReport.creditReportNo
                    }
                })
            },
            goBack(){
                history.go(-1)
            },
            shorConfirmMemo(){
                this.show_confirm_memo = true
                this.$ga.event({
                  eventCategory: 'Marks_v',
                  eventAction: 'click',
                  eventLabel: '出借详情备注点击次数'
                })
                allApi.onEvent({
                    eventType:'track_click',
                    eventName:'Marks_v',
                    eventDescr:'出借详情备注点击次数',
                    eventValue:JSON.stringify({
                        lendNo:this.number
                    }),
                })
            },
            rejectApply(){
                return loanOutApi.rejectApply({
                    borrowNo:this.number,
                    rejectReason:this.rejectReason
                })
                .then(result=>{
                    this.hideLoading()
                    this.show_modal_reject_apply = false
                    history.go(-1)
                })
                .catch(error=> {
                    console.error(error);
                    this.show_modal_reject_apply = false
                    this.hideLoading()
                })
            },
            saveMemo(){
                this.$ga.event({
                  eventCategory: 'Marksure-v',
                  eventAction: 'click',
                  eventLabel: '备注弹窗确定提交次数'
                })
                allApi.onEvent({
                    eventType:'track_click',
                    eventName:'Marksure-v',
                    eventDescr:'备注弹窗确定提交次数',
                    eventValue:JSON.stringify({
                        lendNo:this.number
                    }),
                })
                this.showLoading()
                return loanOutApi.addRemark({
                    borrowNo:this.number,
                    remarks:this.memo
                })
                .then(this.getDetail)
                .then(result=>{
                    this.hideLoading()
                    this.show_confirm_memo = false
                })
                .catch(error=> {
                    console.error(error);
                    this.show_confirm_memo = false
                })
            },
            imgViewShow(url){
                this.currentImg = url
                this.modal_img_show = true
            },
            goSuccess(){
                this.$router.push({
                    name:'loan-in-success'
                })
            },
            add(){
                if(!this.userInfo.isPay || this.userInfo.isExpired){
                    this.setMsgTip({
                        text:'请先完成信用报告',
                        type:'info'

                    })
                    return
                }

                this.showLoading()
                contactApi.judge({
                    mobile:this.loanUserInfo.user.uuid
                })
                .then(result=>{
                    this.show_contact_add = true
                    this.hideLoading()
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            applyContact(){
                this.showLoading()
                contactApi.apply({
                    mobile:this.loanUserInfo.user.uuid,
                    applyReason:this.applyReason
                })
                .then(result=>{
                    this.hideLoading()
                    this.show_contact_add = false
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            confirm(){
                if(!this.userInfo.user){
                    this.showLogin = true
                    return
                }
                if(this.noAuth){
                    this.showTips = true
                    return
                }
                this.show_confirm_lend = true
            },
            contact(str){
                if(!this.userInfo.isPay || this.userInfo.isExpired){
                    this.setMsgTip({
                        text:'请先完成信用报告',
                        type:'info'

                    })
                    return
                }
                
                this.show_contact_actionsheet = true
                if(str == 'agree'){
                    this.$ga.event({
                      eventCategory: 'applyContact_v',
                      eventAction: 'click',
                      eventLabel: '进件联系TA'
                    })
                    allApi.onEvent({
                        eventType:'track_click',
                        eventName:'applyContact_v',
                        eventDescr:'进件联系TA',
                        eventValue:JSON.stringify({
                            uuid:this.loanUserInfo.user.uuid,
                            name:this.loanUserInfo.user.realName,
                            mobile:this.loanUserInfo.user.mobile
                        }),
                    })
                }
                else{
                    this.$ga.event({
                      eventCategory: 'Contact_v',
                      eventAction: 'click',
                      eventLabel: '点击联系TA'
                    })
                    allApi.onEvent({
                        eventType:'track_click',
                        eventName:'Contact_v',
                        eventDescr:'点击联系TA',
                        eventValue:JSON.stringify({
                            uuid:this.loanUserInfo.user.uuid,
                            name:this.loanUserInfo.user.realName,
                            mobile:this.loanUserInfo.user.mobile
                        }),
                    })
                }
            },
            confirmLend(){
                this.show_confirm_lend = false
                this.showPayDetail = true
            },
            payDetailFinish(payObject){
                if(payObject.payType == 0){
                    this.payWay = 'CHARGE'
                }
                else{
                    this.payWay = 'BALANCE'
                }
                this.showPayDetail = false

                this.showPayPassword = true

                // if(this.passwordPass) {
                    // this.showSmsCode = true
                // }
                // else {
                    // this.showPayPassword = true
                // }
            },
            payFinish(password){
                this.password = password
                this.passwordPass = true
                this.showPayPassword = false
                if(this.payWay == 'BALANCE'){
                    this.showSmsCode = true
                }
                else{
                    this.loanOut()
                }
            },
            smsFinish(smsCode){
                this.smsCode = smsCode
                this.showSmsCode = false
                this.loanOut()
            },
            getDetail(){
                return loanInApi.detail({
                    borrowNo:this.number
                })
                .then(result=>{
                    this.detail = result
                })
            },
            getUserInfo(){
                return loanInApi.userInfo({
                    borrowNo:this.number
                })
                .then(result=>{
                    this.loanUserInfo = result
                })
            },
            loanOut(){
                this.showLoading()
                let params = {
                    payWay:this.payWay,
                    tradePassword:this.password,
                    smsCode:this.smsCode,
                    borrowNo:this.number,
                }
                loanOutApi.lendToIt(params)
                .then(result=> {
                    if(_.isEmpty(result)){
                        this.setMsgTip({
                            text:'出借成功',
                            type:'success'
                        })
                        this.$router.push({
                            name:'loan-IOU',
                            params:{
                                number:this.number
                            }
                        })
                        return 
                    }
                    this.payId = result.charge.payId
                    this.pay()
                })
                .catch(error=> {
                    console.error(error);
                    this.hideLoading()
                })
            },
            goForgetPassword(){
                this.$router.push({
                    name:'user-password-find-login',
                    query:{
                        mobile:this.tel
                    }
                })
            },
            pay(){
                payApi.pay({
                    payId:this.payId,
                    returnUrl:location.href
                })
                .then(result=> {
                    location.href = result.payParam.url
                })
                .catch(error=> {
                    console.error(error);
                    this.hideLoading()
                })
            },
            login(){
                let params = {
                    mobile:this.tel,
                    loginPassword:this.password,
                }
                if(!loginValidation(params)) return
                // if(!this.passed) return

                this.showLoading()
                loginApi.login(params)
                .then(result=>{
                    this.setSessionId(result.sessionId)
                    this.setNeedLogin(false)
                })
                .then(this.setUserInfo)
                .then(result=>{
                    this.$ga.event({
                      eventCategory: 'login',
                      eventAction: 'jump',
                      eventLabel: '登录'
                    })
                    this.hideLoading()
                    this.showLogin = false
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            addMemo(str){
                this.memo = this.memo + str
            },
            tipsEvent(){
                this.showModalTips = true
                this.$ga.event({
                  eventCategory: 'fengkong',
                  eventAction: 'click',
                  eventLabel: '点击什么是风控审核'
                })
            }
        },
        created(){


            let status = this.$route.query.status
            if(status == 'fail'){
                this.setMsgTip({
                    text:'借钱给TA失败！',
                    type:'error'
                })
            }
            if(status == 'success'){
                this.setMsgTip({
                    text:'借钱给TA成功！',
                    type:'success'
                })
                this.$router.replace({
                    name:'loan-in-index'
                })
                return
            }

            this.showLoading()
            Promise.all([this.getUserInfo(), this.getDetail()])
            .then(result=> {
                this.pageLoaded = true
            
                setTimeout(()=>{
                    this.showTips = true
                },300)
                this.hideLoading()
            })
            .catch(error=> {
                console.error(error);
                this.pageLoaded = true
            
                setTimeout(()=>{
                    this.showTips = true
                },300)
                this.hideLoading()
            })

        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .loan-in-detail-other{
        .loan-detail-header{
            margin-bottom: 16px;
        }
        .loan-detail-user__info{
            .name{
                display: flex;
                align-items: center;
                span{
                    display: block;
                    padding-right: 5px;
                }
            }
            .contact__button{
                font-size: 12px;
                padding-left: 10px;
                width: auto;
            }
        }

        .tips{
            @extend %font-caption;
            color:$importColor;
            padding:16px;
            line-height: 20px;
            .button{
                display: block;
                text-align:left;
                margin: 0;
                padding-left: 0;
            }
            .warn{
                display: flex;
                align-items: center;
                justify-content: center;
                padding-bottom: 8px;
                .iconfont{
                    display: block;
                    font-size: 18px;
                    font-weight: bold;
                }
                span{
                    display: block;
                    padding-left: 5px;
                    font-weight: normal;
                }
            }
        }
        .wrapper{
            padding-bottom: 100px;
        }
        .loan-detail-main{
            background-color: #fff;
            padding:0 24px;
            position: relative;
        }
        .modal-login{
            .login__header{
                padding-left: 0;
            }
            .form__item{  
                margin-top: 24px;
                &:last-child{
                    margin-top:32px;
                    &:after{
                        display: block;
                    }
                }
                &:after{
                    left:0;
                    right:0;
                }
            }
            .form__value{
                position: relative;
                input{
                    @extend %font-subhead;
                    padding:7px 0;
                    text-align: left;
                }
            }
            .login-button{
                padding-top: 38px;
            }
            .login__forget{
                padding-right: 0;
                text-align: right;
            }
            .register-button{
                @extend %font-caption;
                padding-top: 14px;
                text-align: center;
                span{
                    color:$orange;
                }
            }
        }
        
        .confirm-reject{
            .form-box{
                margin-top: 0;
                margin-bottom: 16px;
                &:last-child{
                    margin-bottom: 8px;
                }
            }
            .form__key{
                padding: 0;
                padding-right: 15px;
            }
            .form__value{
                border-bottom:1px solid $sectionColor;
                input{
                    text-align: left;
                    padding: 10px 0;
                }
            } 
        }
        .footer-button{
            align-items: center;
            .icon-more{
                width: 3em;
            }
        }
        .loan-detail-agreement{
            .pure--black{
                text-align: right;
            }
        }
        .memo{
            @extend %font-caption;
            padding:16px 0 6px 0;
            border-top:1px solid $sectionColor;
        }
        .confirm-memo__main{
        }
        .confirm-memo__textarea{
            width: 100%;
            border:1px solid $sectionColor;
            -webkit-appearance:none;
            resize:none;
            padding:15px;
            box-sizing:border-box;
            border-radius:2px;
        }
        .confirm-memo-quick{
            .title{
                @extend %font-body2;
                padding-top: 16px;
                padding-bottom: 8px;
            }
            ul{
                overflow:hidden;
            }
            li{
                float:left;
                @extend %font-body1;
                padding:4.5px 16px;
                border:1px solid $sectionColor;
                border-radius:16px;
                margin-right: 8px;
                margin-bottom: 8px;
                &:active{
                    background-color: $orange;
                    color:#fff;
                    border-color:$orange;
                }
            }
        }
        .confirm-tips{
            line-height:20px;
            color:$importColor;
            p{
                padding-bottom: 5px;
            }
            .button{
                margin-top: 20px;
            }
        }
    }

</style>
